<template>
    <el-dialog :title="title" :visible.sync="detailDialogVisible">
        <FormDetail
                :form-items="formItems"
                :init-data-url="initDataUrl"
                :handle-init-data="handleInitData"
                :layout-column-num="layoutColumnNum"
                :layout="layout"
                :layout-col-max="layoutColMax"
                :form-data="formData"
                :inline="inline"
        ></FormDetail>
        <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
</template>

<script>
    import FormDetail from './FormDetail.vue'
    export default {
        name: "FormDetailDialog",
        components:{
            FormDetail
        },
        props:{
            title: {
                type: String,
                default: '详情'
            },
            labelWidth:{
                type: String,
                default: '100px'
            },
            inline:{
                type: Boolean,
                default: false
            },
            // 布局一个数据[1,2,2],表示第一行1个第二行2个第三行2个
            layout: {
                type: Array,
                default: function () {
                    return []
                }
            },
            // 布局一个数字，指定几列，layout属性和该属性只能指定一个
            layoutColumnNum: {
                type: Number,
                default: null
            },
            // 布局的列最大值
            layoutColMax:{
                type: Number,
                default: 5
            },
            // 表单项定义信息,参考form.vue的格式，默认文本展示
            formItems:{
                type: Array,
                default: function () {
                    return []
                }
            },
            // 表单项的值
            formData:{
                type: Object,
                default: null
            },
            // 数据初始化的url，
            initDataUrl:String,
            // 数据初始化的url请求完数据后，预处理回调,参数为数据实体对象而非响应对象，请依然返回实体
            handleInitData:Function
        },
        computed:{
        },
        data () {
            return {
                detailDialogVisible: false
            }
        },
        mounted(){
        },
        methods:{
            show(){
                this.detailDialogVisible = true
            },
            hide(){
                this.detailDialogVisible = false
            }
        },
        watch:{
        }
    }
</script>

<style scoped>

</style>